<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--
  收集表单数据:
      若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
      若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
      若<input type="checkbox"/>
      1.没有配置input的value属性那么收集的就是checked (勾选 or 未勾选，是布尔值)
      2.配置input的value属性:
       (1)v-model的初始值是非数组，那么收集的就是checked (勾选 or 未勾选，是布尔值)
       (2)v-model的初始值是数组，那么收集的的就是value组成的数组
   备注: v-model的三个修饰符:
      lazy:失去焦点再收集数据 number: 输入字符串转为有效的数字 trim: 输入首尾空格过滤-->
  <form @submit.prevent="send">
    <div>账号：<input type="text" v-model="person.account"></div>
    <div>密码：<input type="password" v-model="person.password"></div>
    <div>性别：
      男<input type="radio" name="sex" v-model="person.sex" value="男">
      女<input type="radio" name="sex" v-model="person.sex" value="女"></div>
    <div>爱好：
      抽烟<input type="checkbox" value="抽烟" v-model="person.hobby">
      喝酒<input type="checkbox" value="喝酒" v-model="person.hobby">
      玩游戏<input type="checkbox" value="玩游戏" v-model="person.hobby"></div>
    <div>
      <span>所属校区</span>
      <select v-model="person.address">
        <option value="">选择校区</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
      </select>
    </div>
    <div>
      <span>其他信息</span>
      <textarea v-model="person.message"></textarea>
    </div>
    <div><input type="checkbox" v-model="person.isOk">接受协议</div>
    <button>提交</button>
  </form>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = Vue.createApp({
    data(){
      return{
        person:{
          account: "",
          password: "",
          sex:"",
          hobby:[],
          address:"",
          message:"",
          isOk:"",
        }
      }
    },
    methods:{
      send(){
        console.log(JSON.stringify(this.person))
      }
    }
  })
  app.mount("#app")
</script>
</body>
</html>
